<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码 - {{ app_name }}</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/fontawesome.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .forgot-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            width: 100%;
            max-width: 400px;
        }
        .forgot-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        .forgot-body {
            padding: 40px 30px;
        }
        .form-floating {
            margin-bottom: 20px;
        }
        .btn-reset {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            padding: 12px;
            font-weight: 600;
            width: 100%;
        }
        .btn-reset:hover {
            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
        }
        .forgot-links {
            text-align: center;
            margin-top: 20px;
        }
        .forgot-links a {
            color: #667eea;
            text-decoration: none;
        }
        .forgot-links a:hover {
            text-decoration: underline;
        }
        .step-indicator {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
        }
        .step {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #e9ecef;
            color: #6c757d;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin: 0 10px;
        }
        .step.active {
            background: #667eea;
            color: white;
        }
        .step.completed {
            background: #28a745;
            color: white;
        }
    </style>
</head>
<body>
    <div class="forgot-container">
        <div class="forgot-header">
            <h3><i class="fas fa-key me-2"></i>找回密码</h3>
            <p class="mb-0">重置您的账户密码</p>
        </div>
        
        <div class="forgot-body">
            <div class="step-indicator">
                <div class="step active" id="step1">1</div>
                <div class="step" id="step2">2</div>
                <div class="step" id="step3">3</div>
            </div>
            
            {% if error %}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle me-2"></i>{{ error }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            {% endif %}
            
            {% if success %}
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></i>{{ success }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            {% endif %}
            
            <!-- 步骤1：输入邮箱 -->
            <div id="step1-content" {% if show_reset_form %}style="display: none;"{% else %}style="display: block;"{% endif %}>
                <p class="text-muted mb-3">请输入您注册时使用的邮箱地址，我们将向该邮箱发送重置密码的链接。</p>
                <form id="emailForm" method="POST" action="/forgot-password">
                    <div class="form-floating">
                        <input type="email" class="form-control" id="email" name="email" placeholder="邮箱" required>
                        <label for="email"><i class="fas fa-envelope me-2"></i>邮箱地址</label>
                    </div>
                    
                    <button type="submit" class="btn btn-primary btn-reset">
                            <i class="fas fa-paper-plane me-2"></i>发送验证码
                        </button>
                </form>
            </div>
            
            <!-- 步骤2：验证码 -->
            <div id="step2-content" style="display: none;">
                <p class="text-muted mb-3">我们已向您的邮箱发送了验证码，请输入验证码以继续。</p>
                <form id="verifyForm" method="POST" action="/verify-code">
                    <input type="hidden" id="reset_email" name="email">
                    <div class="form-floating">
                        <input type="text" class="form-control" id="verification_code" name="verification_code" placeholder="验证码" required>
                        <label for="verification_code"><i class="fas fa-shield-alt me-2"></i>验证码</label>
                    </div>
                    
                    <button type="submit" class="btn btn-primary btn-reset">
                        <i class="fas fa-check me-2"></i>验证
                    </button>
                </form>
                
                <div class="text-center mt-3">
                    <button type="button" class="btn btn-link" id="resendCode">
                        <i class="fas fa-redo me-1"></i>重新发送验证码
                    </button>
                </div>
            </div>
            
            <!-- 步骤3：重置密码 -->
            <div id="step3-content" {% if show_reset_form %}style="display: block;"{% else %}style="display: none;"{% endif %}>
                <p class="text-muted mb-3">请输入验证码和新密码。</p>
                <form id="resetForm" method="POST" action="/reset-password">
                    <input type="hidden" id="reset_code" name="code" value="{{ code }}">
                    <div class="form-floating">
                        <input type="password" class="form-control" id="new_password" name="new_password" placeholder="新密码" required>
                        <label for="new_password"><i class="fas fa-lock me-2"></i>新密码</label>
                    </div>
                    
                    <div class="form-floating">
                        <input type="password" class="form-control" id="confirm_new_password" name="confirm_password" placeholder="确认新密码" required>
                        <label for="confirm_new_password"><i class="fas fa-lock me-2"></i>确认新密码</label>
                    </div>
                    
                    <button type="submit" class="btn btn-primary btn-reset">
                        <i class="fas fa-save me-2"></i>重置密码
                    </button>
                </form>
            </div>
            
            <div class="forgot-links">
                <a href="/login"><i class="fas fa-arrow-left me-1"></i>返回登录</a>
            </div>
        </div>
    </div>

    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // 更新步骤指示器
            function updateStep(step) {
                $('.step').removeClass('active completed');
                
                for (let i = 1; i <= step; i++) {
                    if (i < step) {
                        $(`#step${i}`).addClass('completed');
                    } else {
                        $(`#step${i}`).addClass('active');
                    }
                }
            }
        
            // 显示步骤内容
            function showStep(step) {
                $('[id$="-content"]').hide();
                $(`#step${step}-content`).show();
                updateStep(step);
            }

            // 邮箱表单提交
            $('#emailForm').on('submit', function(e) {
                const email = $('#email').val().trim();
                
                if (!email) {
                    e.preventDefault();
                    alert('请输入邮箱地址');
                    return false;
                }
                
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(email)) {
                    e.preventDefault();
                    alert('请输入有效的邮箱地址');
                    return false;
                }

                // 实际应用中，这里应该是AJAX请求发送邮箱
                $.ajax({
                    url: '/forgot-password',
                    method: 'POST',
                    data: { email: email },
                    success: function(response) {
                        // 保存邮箱以便重新发送验证码
                        $('#reset_email').val(email);
                        // 显示成功消息
                        alert('验证码已发送到您的邮箱，请查看邮件获取验证码');
                        // 更新步骤指示器并显示步骤2
                        showStep(2);
                    },
                    error: function(xhr) {
                        const error = xhr.responseJSON?.detail || '发送失败，请重试';
                        alert(error);
                    }
                });

                // 防止表单实际提交
                e.preventDefault();
            });
            
            // 验证码表单提交
            $('#verifyForm').on('submit', function(e) {
                const email = $('#reset_email').val().trim();
                const code = $('#verification_code').val().trim();
                
                if (!email) {
                    e.preventDefault();
                    alert('邮箱地址不能为空');
                    return false;
                }
                
                if (!code) {
                    e.preventDefault();
                    alert('请输入验证码');
                    return false;
                }

                // 实际应用中，这里应该是AJAX请求验证验证码
                $.ajax({
                    url: '/verify-code',
                    method: 'POST',
                    data: { email: email, code: code },
                    success: function(response) {
                        // 保存验证码
                        $('#reset_code').val(response.reset_token);
                        // 更新步骤指示器并显示步骤3
                        showStep(3);
                    },
                    error: function(xhr) {
                        const error = xhr.responseJSON?.detail || '验证码验证失败';
                        alert(error);
                    }
                });

                // 防止表单实际提交
                e.preventDefault();
            });
            
            // 重置密码表单提交
            $('#resetForm').on('submit', function(e) {
                const password = $('#new_password').val();
                const confirmPassword = $('#confirm_new_password').val();
                
                if (password.length < 6) {
                    e.preventDefault();
                    alert('密码至少需要6个字符');
                    return false;
                }
                
                if (password !== confirmPassword) {
                    e.preventDefault();
                    alert('两次输入的密码不一致');
                    return false;
                }
            });
            
            // 重新发送验证码
            $('#resendCode').on('click', function() {
                const email = $('#reset_email').val();
                


                $.ajax({
                    url: '/resend-code',
                    method: 'POST',
                    data: { email: email },
                    success: function(response) {
                        alert('验证码已重新发送');
                    },
                    error: function(xhr) {
                        const error = xhr.responseJSON?.detail || '发送失败';
                        alert(error);
                    }
                });
            });

            // 初始显示步骤1
            // 确保show_reset_form变量已定义，默认为false
            if (typeof show_reset_form === 'undefined') {
                show_reset_form = false;
            }
            if (!show_reset_form) {
                showStep(1);
            }
        });
    </script>
</body>
</html>